@fluentui/keyboard-key

@fluentui/keyboard-key

A simple utility for determining the KeyboardEvent.key property from a keyboard event.

• Install
• Usage
  • getKey()
  • getCode()
• Why?
• Locale Caveat

Install

yarn add keyboard-key

# or

npm install keyboard-key

Usage

getKey()

Get the key property value from an event.

document.addEventListener('keydown', event => {
  const key = keyboardKey.getKey(event);

  switch (key) {
    case 'Escape':
      // handle escape key
      break;
    default:
      break;
  }
});

See MDN or the source for a full list of key values.

getCode()

You can also get the normalized keyCode from an event. @fluentui/keyboard-key includes a hash of key names to keyCodes for easy comparisons:

document.addEventListener('keydown', event => {
  const code = getCode(event);

  switch (code) {
    case keyboardKey.Escape: // 27
      // handle escape key
      break;
    default:
      break;
  }
});

Why?

Most previous key identifying KeyboardEvent properties have been pressed have been deprecated in favor of Keyboard.key.

:-1: KeyboardEvent.char :-1: KeyboardEvent.charCode :-1: KeyboardEvent.keyCode :-1: KeyboardEvent.keyIdentifier :-1: KeyboardEvent.keyLocation :-1: KeyboardEvent.which

:+1: KeyboardEvent.key

Unfortunately, KeyboardEvent.key does not yet have full browser support. Leaving the browsers without a reliable property for identifying keyboard event keys.

Locale Caveat

This utility interprets use of the shift key when inferring event key values. Example, an event describing shift+/ would result in a key value of ?. This logic assumes an en-US locale keyboard layout. This will not work if you are using a different locale such as a German layout where / is shift+7.